﻿<%@ Page Title="demo 2-1" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Demo2_1.aspx.cs" Inherits="TestSuiteExtNET.Demo2_1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  <style type="text/css">
    .accountStats {
       margin: 10px 1% 0 2%;
       padding: 4px;
       display: inline-block;
       width: 95%;
       cursor: pointer;
       height: 65px;
       border: 1px solid #ddd;
       border-radius: 4px;
       box-shadow: 2px 2px 2px #999;
    }
    
    div.accountStats h6 {
       font-size : 24px;
       color     : #3A4B5B;
       font-family : tahoma,arial,san-serif;
    }
        
    .accountStats p.FirstChar {
        bottom: 96px;
        font-size: 40px;
        left: 65px;
        position: relative;
    }
    
    .accountStats p.ElementsCount {
        bottom: 184px;
        font-size: 40px;
        left: 106px;
        position: relative;
    }
    
    div.x-view-over { background-color:Lime; }
  </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
           <ext:Panel ID="Panel1" 
                runat="server" 
                Title="Utenti" 
                Region="West"
                Layout="AccordionLayout"
                Width="225" 
                MinWidth="225" 
                MaxWidth="400" 
                Split="true" 
                Collapsible="true">
                <Items>
                    <ext:Panel ID="Panel2" 
                        runat="server" 
                        Title="Utenti raggruppati per iniziale" 
                        Border="false" 
                        BodyPadding="6"
                        Icon="FolderGo" AutoScroll="true">
                        <Items>
                          <ext:DataView runat="server" ID="dtvwAccounts" ClientIDMode="Static" 
                                        ItemSelector="div.accountStats" SingleSelect="true" >
                             <Store>
                               <ext:Store runat="server" ID="dtvwAccountsStore">
                                 <Model>
                                   <ext:Model runat="server" ID="dtvwAccountsModel">
                                     <Fields>
                                       <ext:ModelField Name="FirstChar" />
                                       <ext:ModelField Name="ElementsCount" />
                                     </Fields>
                                   </ext:Model>
                                 </Model> 
                               </ext:Store>
                             </Store>
                             <Tpl runat="server">
                               <Html>
                                 <tpl for=".">
                                   <div class="accountStats">
                                     <img src="/images/user1.png" />
                                     <p class="FirstChar">{FirstChar}:</p>
                                     <p class="ElementsCount">{ElementsCount}</p>
                                   </div>
                                 </tpl>
                               </Html>
                             </Tpl>
                             <DirectEvents>
                               <ItemClick OnEvent="UserGroupSelected">
                                    <ExtraParams>
                                        <ext:Parameter 
                                            Name="Values" 
                                            Value="#{dtvwAccounts}.getRowsValues({ selectedOnly : true })" 
                                            Mode="Raw" 
                                            Encode="true" />
                                    </ExtraParams>
                               </ItemClick>
                             </DirectEvents>   
                             <Listeners>
                                <%--<ItemClick Fn="itemClick" />--%>
                                <Refresh Handler="this.el.select('.accountStats').addClsOnOver('x-view-over');" Delay="100" />
                             </Listeners>                                                     
                          </ext:DataView>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel3" 
                        runat="server" 
                        Title="Settings" 
                        Border="false" 
                        BodyPadding="6"
                        Icon="FolderWrench"
                        Html="Some settings in here"
                        />
                </Items>
            </ext:Panel>

            <ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
                <Items>
                    <ext:Panel ID="Panel4" 
                        runat="server" 
                        Title="Center" 
                        Border="false" 
                        BodyPadding="6"
                        Layout="FitLayout">
                       <Items>
                         <ext:GridPanel runat="server" ID="grdAccounts"
                                        ColumnLines="true" >
                           <Store>
                             <ext:Store runat="server" ID="grdAccountsStore" PageSize="20" OnReadData="RefreshData">
                               <Model>
                                 <ext:Model runat="server" ID="grdAccountsModel">
                                    <Fields>
                                      <%--<ext:ModelField Name="UserId" />--%>
                                      <ext:ModelField Name="Username" />
                                      <ext:ModelField Name="EMail" />
                                      <ext:ModelField Name="RegistrationDate" />
                                      <ext:ModelField Name="IsLockedOut" />
                                      <ext:ModelField Name="IsApproved" />
                                    </Fields>
                                 </ext:Model>
                               </Model>
                               <Sorters>
                                    <ext:DataSorter Property="Username" Direction="ASC" />
                                    <ext:DataSorter Property="Email" Direction="ASC" />
                                    <ext:DataSorter Property="RegistrationDate" Direction="ASC" />
                               </Sorters>                               
                             </ext:Store>
                           </Store>
                           <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="25" />
                                    <ext:Column ID="Column1" runat="server" Text="Username" DataIndex="Username" Flex="1" />
                                    <ext:Column ID="Column2" runat="server" Text="Email" DataIndex="EMail" Flex="1" />
                                    <ext:DateColumn ID="Column3" runat="server" Text="Data Registrazione" Width="150" DataIndex="RegistrationDate" Format="dd/MM/yyyy" />
                                    <ext:CheckColumn ID="Column4" runat="server" Text="Approvato" DataIndex="IsApproved" Sortable="false" />
                                    <ext:CheckColumn ID="Column5" runat="server" Text="Bloccato" DataIndex="IsLockedOut" Sortable="false" />
                                </Columns>
                           </ColumnModel>
                           <BottomBar>
                                <ext:PagingToolbar ID="PagingToolbar1" 
                                    runat="server"                      
                                    DisplayInfo="true" 
                                    DisplayMsg="Displaying Accounts {0} - {1} of {2}" 
                                    EmptyMsg="No Accounts to display" 
                                    />
                           </BottomBar>
                         </ext:GridPanel>
                       </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel5" 
                        runat="server" 
                        Title="Close Me" 
                        Closable="true" 
                        Border="false" 
                        BodyPadding="6"
                        Html="Closeable Tab"
                        />
                </Items>
            </ext:TabPanel>
</asp:Content>
